<template>
	<view class="warp">
		<view class="head">
			<up-navbar title="贵州森茂林业开发有限责任公司" titleWidth="500" leftIconSize="0">
			</up-navbar>
		</view>

		<view class="middle">
			<up-card :full="true" border-radius="0" :show-head="false" padding="0 0 30rpx 0">
				<template #body>
					<up-grid :border="false" col="4">
						<up-grid-item v-for="(item,index) in list" :key="index" class="grid" @click="click(item)">
							<up-icon :name="item.name" :size="40" :customStyle="{padding:20+'rpx'}" />
							<text class="grid-text" style="font-size: 26rpx;">{{item.title}}</text>
						</up-grid-item>
					</up-grid>
					<up-toast ref="uToastRef" />
				</template>
			</up-card>
		</view>
		<view class="order">

			<Card :data='cardList'></Card>
		</view>
	</view>





</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import Card from '@/components/Card/index.vue'

	import SqhImg from '../../static/image/icon-大-米面.png'
	import SqImg from '../../static/image/申请订单.png'
	import YxImg from '../../static/image/电影1.png'
	import CjImg from '../../static/image/拍照.png'
	import TzImg from '../../static/image/通知1.png'
	import TjImg from '../../static/image/统计.png'
	import DdImg from '../../static/image/我的订单.png'
	import XxImg from '../../static/image/信息.png'

	import Fhtx from '../../static/image/发货提醒.png'
	import Sqth from '../../static/image/固定资产调拨申请单.png'
	import Wtfk from '../../static/image/问题反馈.png'
	// 宫格数据1
	const list = reactive([{
			name: SqImg,
			title: '申请供货',
		},
		{
			name: SqhImg,
			title: '食材管理',

		},
		{
			name: CjImg,
			title: '场景拍照',

		},
		{
			name: DdImg,
			title: '订单',

		},
		{
			name: YxImg,
			title: '影像中心',

		},
		{
			name: TjImg,
			title: '销售统计',

		},
		{
			name: XxImg,
			title: '供应商信息',

		},
		{
			name: TzImg,
			title: '通知',

		},
	]);

	const cardList = reactive([{
			title: "发货提醒",
			imgUrl: Fhtx
		},
		{
			title: "申请通过",
			imgUrl: Sqth
		},
		{
			title: "问题反馈",
			imgUrl: Wtfk
		}
	])
	// 创建对子组件的引用  
	const uToastRef = ref(null);

	// 定义方法  
	const click = (name) => {
		if (uToastRef.value) {
			console.log(name)
			uToastRef.value.success(name.title); // 注意：这里加1是因为通常我们是从第1个开始计数的  
		}
	};
</script>

<style lang="scss" scoped>
	.warp {
		height: 100vh;
		border: 1px solid red;

		.middle {

			/*  #ifdef H5 */
			margin-top: 110rpx;
			/*  #endif  */
			/*  #ifdef MP-WEIXIN */
			margin-top: 200rpx;
			/*  #endif  */
		}
	}
</style>